<template>
  <div>
    <div class="button-group">
      <el-button type="primary" @click="currentView = 'news'">新闻</el-button>
      <el-button type="success" @click="currentView = 'tasks'">任务</el-button>
      <el-button type="warning" @click="currentView = 'extensions'">扩展</el-button>
    </div>

    <keep-alive>
      <component :is="currentViewComponent" />
    </keep-alive>

    <el-table v-if="!currentView" :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="Date" width="180" />
      <el-table-column prop="name" label="Name" width="180" />
      <el-table-column prop="address" label="Address" />
    </el-table>

  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import NewsPage from '@/components/NewsPage.vue'
import TasksPage from '@/components/TasksPage.vue'
import ExtensionsPage from '@/components/ExtensionsPage.vue'

const currentView = ref('')

const currentViewComponent = computed(() => {
  switch(currentView.value) {
    case 'news': return NewsPage
    case 'tasks': return TasksPage
    case 'extensions': return ExtensionsPage
    default: return null
  }
})

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>

<style scoped>
</style>
